/**
 * Created by DELL on 2017/6/1.
 */

import React, {
    Component,
    PropTypes
} from 'react';

import {
    MapView,
    MapTypes,
    Geolocation
} from 'react-native-baidu-map';

import {
    Button,
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Dimensions,
} from 'react-native';
import BaseComponent, {AppIndictor} from '../../base/Base'

const { height, width } = Dimensions.get('window');

export default class AndroidBaiduMapPage extends BaseComponent {

    constructor(props) {
        super(props);

        this.state = {
            showIndictor:false,
            mayType: MapTypes.NORMAL,
            zoom: 15,
            center: {
                longitude: 113.981718,
                latitude: 22.542449
            },
            trafficEnabled: true,
            baiduHeatMapEnabled: false,
            markers: [{
                longitude: 113.981718,
                latitude: 22.542449,
                title: "Window of the world"
            },{
                longitude: 113.995516,
                latitude: 22.537642,
                title: ""
            }]
        };
    }

    componentDidMount() {
        this._getLocation();
    }

    _getLocation(){
        this.setState({showIndictor:true})
        Geolocation.getCurrentPosition()
            .then(location=>{
                // alert(JSON.stringify(location))
                this.setState({
                    showIndictor:false,
                    center: {
                        longitude: location.longitude,
                        latitude: location.latitude,
                    },

                    markers: [

                        {
                        longitude: location.longitude+0.005,
                        latitude: location.latitude,
                        title: "商家一 开发中..."
                    },
                        {
                            longitude: location.longitude,
                            latitude: location.latitude+0.005,
                            title: "商家二 开发中..."
                        },
                        {
                            longitude: location.longitude-0.005,
                            latitude: location.latitude,
                            title: "商家三 开发中..."
                        },
                        {
                            longitude: location.longitude,
                            latitude: location.latitude-0.005,
                            title: "商家四 开发中..."
                        },
                    ]

                })
            })
            .catch(error=>{
                alert(error)
                this.setState({
                    showIndictor:false,
                })
            })

    }

    render() {
        return (
            <View style={styles.container}>
                <AppIndictor
                    modalVisible={this.state.showIndictor}
                    size={'large'}
                    color={'#ff6138'}
                />
                <MapView
                    trafficEnabled={this.state.trafficEnabled}
                    baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
                    zoom={this.state.zoom}
                    mapType={this.state.mapType}
                    center={this.state.center}
                    marker={this.state.marker}
                    markers={this.state.markers}
                    style={styles.map}
                    onMarkerClick={(e) => {
                        console.warn(JSON.stringify(e));
                    }}
                    onMapClick={(e) => {
                    }}
                >
                </MapView>

                <View style={styles.row}>
                    <Button title="一般模式" onPress={() => {
                        this.setState({
                            mapType: MapTypes.NORMAL
                        });
                    }} />
                    <Button style={styles.btn} title="卫星模式" onPress={() => {
                        this.setState({
                            mapType: MapTypes.SATELLITE
                        });
                    }} />

                    <Button style={styles.btn} title="刷新定位" onPress={() => {this._getLocation()}} />
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        height: 40
    },
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    map: {
        width:width,
        height:  height- 150,
        marginBottom: 16
    }
});


